divide-y

The divide-y class belongs to the divide color group within the borders category.

Example Usage

Here is an example of how to use divide-y:

<div class='flex text-black bg-gray-100 divide-x-4 divide-solid divide-y '>
  <div>some</div>
  <div>content</div>
  <div>as</div>
  <div>demo</div>
</div>
some
content
as
demo

Resulting CSS

--tw-divide-y-reverse: 0;
border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
border-bottom-width: calc(1px * var(--tw-divide-y-reverse));

Other Divide color Classes

divide-x divide-y divide-solid divide-dashed divide-dotted divide-double divide-none divide-amber-100 divide-amber-200 divide-amber-300 divide-amber-400 divide-amber-50 divide-amber-500 divide-amber-600 divide-amber-700 divide-amber-800
View other Borders classesView all Divide color classes

Get Tailwind Scanner!

The absolute must-have tool for anyone using Tailwind CSS.

Scan, Edit, Export any tailwind site in browser to create the perfect UI - download the chrome extension!